<template>
	<view>
		<template v-if="comment_list.length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<view class="main-content">
				<view class="comments-container">
					<view class="comments-title">
						评论
					</view>
					<view class="touchBox list-container">
						<view class="comment-block" v-for="(item,index) in comment_list" :key="index">
							<view class="user-icon-container user-icon">
								<image :src="item.img" mode=""></image>
							</view>
							<view class="comment-info">
								<view class="user-info">
									<view class="nickname">
										{{item.nickname}}
									</view>
									<view class="date">
										{{item.create_time}}
									</view>
								</view>
								<view class="comment-text">
									{{item.comment}}
								</view>
								<template v-if="item.second_comment_list.length!==0">
									<view class="second-comments-block" v-for="(i,j) in item.second_comment_list"
										:key="j">
										<view class="second-comment">
											<view class="user-icon-container user-icon">
												<image :src="i.img" mode=""></image>
											</view>
											<view class="second-comment-content">
												<view class="second-comment-info">
													<view class="phone">
														{{i.nickname}}
													</view>
													<view class="praises ">
														<view class="log-inline-block praise-icon">
															<image src="../../static/images/pre-praise.db.png" mode="">
															</image>

														</view>
														<text class="praise-num">
															{{i.praise_num}}
														</text>
													</view>
												</view>
												<view class="second-comment-text">
													<text>{{i.comment}}</text>
												</view>
											</view>
										</view>
									</view>

								</template>
								<view class="span praise">
									<image src="../../static/images/pre-praise.db.png" mode=""></image>
									<text class="praise-num">{{item.praise_num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-area">
					<view class="bottom-area-content">
						<view class=" write-comment-enter">
							<image src="../../static/images/write.png" mode=""></image>
							<view class="write-comment-text">
								写评论
							</view>
						</view>
					</view>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				page_index: 1,
				comment_list: [],
				last_id: '',
				loadAll: false
			};
		},
		onReachBottom() {
			if (this.loadAll) return;
			this.page_index++
			this.getMizoneOtherCommentList(true)
		},
		methods: {
			getMizoneOtherCommentList(flag) {
				this.$request.get('/getMizoneOtherCommentList', {
					'moment_id': this.id,
					'page_index': this.page_index,
					comment_type:'moment',
					last_id: this.last_id
				}).then((res) => {
					let list = res.data.data.comment_list
					if (list.length == 0 || res.data.data.is_end) {
						this.loadAll = true
					}
					this.last_id = res.data.data.last_id
					if (flag) {
						this.comment_list = this.comment_list.concat(list)
					} else {
						this.comment_list = list
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getMizoneOtherCommentList()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.main-content {
		width: 6.56rem;
		margin: auto;
		overflow: hidden;
		padding-bottom: 0.8rem;

		.comments-container {
			position: relative;
			width: 100%;
			border-top: 0.5px solid rgba(0, 0, 0, .15);
			padding: 0.32rem 0;

			.comments-title {
				text-align: left;
				width: 100%;
				height: 0.48rem;
				font-size: .32rem;
				font-weight: 700;
				color: rgba(0, 0, 0, .87);
				line-height: .48rem;
				margin-bottom: 0.32rem;
			}
		}

		.list-container {
			.comment-block {
				position: relative;
				width: 100%;
				text-align: left;
				min-height: 0.74rem;

				&:not(:last-child) {
					margin-bottom: 0.48rem;
				}

				.user-icon {
					position: absolute;
					top: 0;
					left: 0;
					border-radius: 1rem;
				}

				.user-icon-container {
					width: 0.733rem;
					height: 0.733rem;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.comment-info {
					position: relative;
					margin-left: 0.9067rem;
					padding: 0 0 0.32rem 0.0667rem;
					border-bottom: 0.5px solid rgba(0, 0, 0, .15);

					.user-info {
						margin-bottom: 0.24rem;
						position: relative;

						.nickname {
							font-size: .28rem;
							color: rgba(0, 0, 0, .54);
							line-height: .38rem;
							margin-bottom: 0.04rem;
						}

						.date {
							font-size: .2rem;
							color: rgba(0, 0, 0, .54);
						}
					}

					.comment-text {
						color: #000;
						letter-spacing: .01rem;
						font-size: .28rem;
						line-height: .42rem;
						width: 100%;
					}

					.second-comments-block {
						padding: 0.32rem;
						margin-top: 0.26rem;
						background: #f5f5f5;

						.second-comment {
							position: relative;

							.user-icon-container {
								width: 0.48rem;
								height: 0.48rem;
								border-radius: 1rem;
								position: absolute;
								top: 0;
								left: 0;

								image {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}

							.second-comment-content {
								margin-left: 0.64rem;

								.second-comment-info {
									height: 0.48rem;
									display: flex;
									justify-content: space-between;
									align-items: center;
									font-size: .24rem;
									color: rgba(0, 0, 0, .54);

									.phone {}

									.praises {
										.log-inline-block {
											height: 0.24rem;
											width: 0.24rem;
											vertical-align: baseline;
											display: inline-block;
											margin-right: 0.08rem;

											image {
												height: 0.24rem;
												width: 0.24rem;
												vertical-align: baseline;
												margin-right: 0.08rem;
											}


										}

										.praise-num {
											line-height: .32rem;
											font-size: .24rem;
											color: rgba(0, 0, 0, .54);
										}
									}
								}

								.second-comment-text {
									text {
										color: rgba(0, 0, 0, .87);
										line-height: .32rem;
										font-size: .24rem;
										word-break: break-all;
									}
								}
							}
						}
					}

					.praise {
						position: absolute;
						right: 0;
						top: 0.2rem;

						image {
							height: 0.24rem;
							width: 0.24rem;
							vertical-align: baseline;
							margin-right: 0.08rem;
						}

						.praise-num {
							line-height: .32rem;
							font-size: .24rem;
							color: rgba(0, 0, 0, .54);
						}
					}
				}
			}

		}

		.bottom-area {
			position: fixed;
			width: 100%;
			height: 0.96rem;
			border-top: 0.5px solid rgba(0, 0, 0, .15);
			bottom: 0;
			left: 0;
			background-color: #fff;

			.bottom-area-content {
				width: 7.2rem;
				height: 100%;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;

				.write-comment-enter {
					text-align: center;
					flex: 1;

					image {
						width: 0.48rem;
						height: 0.48rem;
					}

					.write-comment-text {
						font-size: .2rem;
						color: rgba(0, 0, 0, .72);
					}
				}

			}
		}

	}
</style>